<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字八字计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 首页 -->
    <div id="homePage" class="page active">
        <div class="container">
            <!-- 标题 -->
            <h1 class="main-title">数字八字计算器</h1>
            
            <!-- 日期输入框 -->
            <div class="input-wrapper">
                <input type="text" id="dateInput" class="date-input" placeholder="请选择出生日期" readonly>
                <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                    <line x1="16" y1="2" x2="16" y2="6"/>
                    <line x1="8" y1="2" x2="8" y2="6"/>
                    <line x1="3" y1="10" x2="21" y2="10"/>
                </svg>
            </div>
        </div>
    </div>

    <!-- 日期选择弹窗 -->
    <div id="dateModal" class="modal">
        <!-- 灰色蒙版背景 -->
        <div class="modal-overlay"></div>
        
        <!-- 弹窗内容 -->
        <div class="modal-content">
            <!-- 弹窗头部 -->
            <div class="modal-header">
                <!-- 取消按钮 -->
                <button id="cancelBtn" class="btn btn-cancel">取消</button>
                
                <!-- 公历/农历切换器 -->
                <div class="calendar-switch">
                    <div class="switch-container">
                        <button id="solarBtn" class="switch-btn active">公历</button>
                        <button id="lunarBtn" class="switch-btn">农历</button>
                    </div>
                </div>
                
                <!-- 完成按钮 -->
                <button id="confirmBtn" class="btn btn-confirm">完成</button>
            </div>
            
            <!-- 提示信息 -->
            <div class="modal-tip">
                ！出生时间不详，默认12：00，会对结果产生一定影响哦！
            </div>
            
            <!-- 滚轴选择器容器 -->
            <div class="picker-container">
                <!-- 年份选择器 -->
                <div class="picker-column">
                    <div class="picker-label">年</div>
                    <div class="picker-wrapper" data-type="year">
                        <div class="picker-list" id="yearPicker">
                            <!-- 年份选项通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
                
                <!-- 月份选择器 -->
                <div class="picker-column">
                    <div class="picker-label">月</div>
                    <div class="picker-wrapper" data-type="month">
                        <div class="picker-list" id="monthPicker">
                            <!-- 月份选项通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
                
                <!-- 日期选择器 -->
                <div class="picker-column">
                    <div class="picker-label">日</div>
                    <div class="picker-wrapper" data-type="day">
                        <div class="picker-list" id="dayPicker">
                            <!-- 日期选项通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
                
                <!-- 小时选择器 -->
                <div class="picker-column">
                    <div class="picker-label">时</div>
                    <div class="picker-wrapper" data-type="hour">
                        <div class="picker-list" id="hourPicker">
                            <!-- 小时选项通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
                
                <!-- 分钟选择器 -->
                <div class="picker-column">
                    <div class="picker-label">分</div>
                    <div class="picker-wrapper" data-type="minute">
                        <div class="picker-list" id="minutePicker">
                            <!-- 分钟选项通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 结果页面 -->
    <div id="resultPage" class="page">
        <div class="container">
            <!-- 返回按钮 -->
            <div class="result-header">
                <button id="backBtn" class="back-btn">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M19 12H5"/>
                        <path d="m12 19-7-7 7-7"/>
                    </svg>
                    返回
                </button>
                <h2 class="result-title">数字八字结果</h2>
            </div>
            
            <!-- 用户输入信息显示 -->
            <div class="result-section">
                <h3 class="section-title">出生信息</h3>
                <div class="info-display" id="birthInfo">
                    <!-- 通过JavaScript动态填充 -->
                </div>
            </div>
            
            <!-- 数字八字上下卦显示 -->
            <div class="result-section">
                <h3 class="section-title">数字八字</h3>
                <div class="gua-display">
                    <div class="gua-row">
                        <span class="gua-label">上卦：</span>
                        <span class="gua-numbers" id="upperGua">
                            <!-- 通过JavaScript动态填充 -->
                        </span>
                    </div>
                    <div class="gua-row">
                        <span class="gua-label">下卦：</span>
                        <span class="gua-numbers" id="lowerGua">
                            <!-- 通过JavaScript动态填充 -->
                        </span>
                    </div>
                </div>
            </div>
            
            <!-- 五行统计显示 -->
            <div class="result-section">
                <h3 class="section-title">五行统计</h3>
                <div class="analysis-content" id="analysisContent">
                    <!-- 通过JavaScript动态填充 -->
                </div>
            </div>
            
          

    <!-- 引入JavaScript文件 -->
    <script src="digital-bazi-calculator.js"></script>
    <script src="app.js"></script>
</body>
</html>